<template>
	<div class="toastcover">
		<span class="toast">{{msg1}}</span>
	</div>
</template>
<script>
	"use strict";
	export default {
		name:"toast",
		props:["msg"],
		data(){
			return{
				msg1:this.msg,
			}
		},
		computed:{
		},
		mounted(){
			var th = this;
			setTimeout(function(){
				th.msg1 = "";
			},1400)
		},
		watch:{
			msg1(v,ov){
				this.$emit("toast",v);
			}
		}
	}
</script>
<style lang="scss">
	@import '../assets/sass/index.scss';
	.toastcover{
		@include position(top,left,6rem,50%);
		transform:translateX(-50%);
		animation:opcity-animation 1.5s ease-in-out 1;
	}
	.toast{
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		height:count(30rem);
		padding-left:count(10rem);
		padding-right:count(10rem);
		border-radius: count(5rem);
		color:#fff;
		background:rgba(0,0,0,.6);
		font-size: 16px;
	}
</style>
